<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>

    <style>
        .one,.two,.three,.four{
            width: 980px;
            height: 500px;
            border: 1px solid #ddd;
            margin: 20px auto;

            /*设置弹性盒模型*/
            display: flex;
            /*元素整体(父类+子类)靠左排列*/
            /*display: inline-flex;*/

            /*设置主轴对齐方式*/
            /*设置结尾 子类元素靠右水平排列*/
            justify-content: flex-end;

            /*设置侧轴对齐方式 子类元素靠下排列 垂直(默认)*/
            align-items: flex-end;

        }

        .one>div,.two>div,.four>div{
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }

        .three>div{
            /* align-items 默认属性值是stretch
                与 flex-start 的区别是：当子类没有高度的时候，
                flex-start 会以子类元素的内容大小作为高度
                stretch 会以父类的高度作为高度

            */
            width: 200px;
            border: 1px solid red;
        }




        .two{
            /*设置主轴居中    左右居中*/
            justify-content: center;
            /*设置侧轴居中    上下居中*/
            align-items: center;
        }

        .two>div:nth-child(2){
            /*要想设置div标签里的文字居中，就要把文字对应的div标签看作父类，文字看做子类*/
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .three{
            /*设置主轴两端对齐中间留有对应的空白*/
            justify-content: space-around;
            /*设置开头  上下 */
            align-items: flex-start;
        }

        .four{
            /*两端留有对应的空白 中间留有对应的空白*/
            justify-content: space-between;
            /* align-items 默认属性值是stretch
                与 flex-start 的区别是：当子类没有高度的时候，
                flex-start 会以子类元素的内容大小作为高度
                stretch 会以父类的高度作为高度

            */
            align-items: stretch;
        }


    </style>



</head>
<body>

<div class="one">
    <div>左</div>
    <div>中</div>
    <div>右</div>
</div>

<div class="two">
    <div>左</div>
    <div>中</div>
    <div>右</div>
</div>

<div class="three">
    <div>flex-start左</div>
    <div>中</div>
    <div>右</div>
</div>


<div class="four">
    <div>stretch左</div>
    <div>中</div>
    <div>右</div>
</div>



</body>
</html>